import { defineComponent, ref } from "vue";
import CardView from "@/components/CardView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ListView from "@/components/ListView";
import ButtonGroupView from "@/components/ButtonGroupView";
import { Divider } from "vant";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import { useRequest } from "./request";
import {
  getUserInfoUrl,
  getUserTypeValue,
  phoneNumControl,
} from "@/command/apiTool";
import IconText from "@/components/IconText";
import time from "@/assets/image/time.png";
import PageTitle from "@/components/PageTitle";
import BackGroundImage from "@/components/BackGroundImage";
import InfoCellGray from "@/components/InfoCellGray";
import TextView from "@/components/TextView";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import { ITextGroupPropsData } from "@/components/TextGroups/types";
import { useRouter } from "vue-router";
import MessageCard from "@/components/MessageCard";
import FilterMenuSearch from "@/components/FilterMenuSearch";

export default defineComponent({
  name: "",
  setup() {
    const form = ref({});
    const router = useRouter();
    const { page, newInfoList, btnAction } = useRequest();
    const render1 = () => {
      const messages = newInfoList.value.map((e: any) => {
        let maskedPhoneNumber = phoneNumControl(e.phone);
        return {
          text: `用户${maskedPhoneNumber}通过平台发布了${e.sum}..`,
          time: e.agoDetail,
        };
      });
      return (
        <BackGroundImage>
          <MessageCard data={messages} />
        </BackGroundImage>
      );
    };
    const renderItem = (e: any) => {
      const buttons: IButtonGroupViewData[] = [
        {
          text: "去申请",
          type: "primary",
          plain: true,
          onClick: () => {
            router.push(`/unsalableApplication?id=${e.userId}`);
          },
        },
      ];
      const buttons2: IButtonGroupViewData[] = [
        {
          text: "拒绝",
          onClick: () => {
            btnAction({
              id: e.id,
              stats: "2",
            });
          },
        },
        {
          text: "同意",
          onClick: () => {
            btnAction({
              id: e.id,
              stats: "1",
            });
          },
        },
      ];
      const data: ITextGroupPropsData[] = [
        {
          display: getUserTypeValue() == "dh",
          name: "滞销农产品",
          value: e.productName,
          width: "45%",
        },
        {
          display: getUserTypeValue() == "dh",
          name: "滞销数量",
          value: `${e.saleNum}kg`,
          width: "45%",
        },
        {
          display: getUserTypeValue() == "dh",
          name: "产品单价",
          value: e.price + "元",
          width: "45%",
        },
        {
          display: getUserTypeValue() !== "dh",
          name: "主营业务",
          value: e.productName,
          width: "100%",
        },
      ].filter((e: any) => e.display);
      return (
        <div class={"w-full"}>
          <InfoCellGray
            {...{
              labels:
                e.teamFlag == "1"
                  ? [
                      {
                        name:
                          getUserTypeValue() == "dh" ? "结队小户" : "结队大户",
                        type: "tag",
                      },
                    ]
                  : undefined,
              data: data,
              title: e.name,
              src: e.logoUrl,
            }}
          >
            <TextView>{e.address}</TextView>
            {getUserTypeValue() == "dh" && (
              <RoundEdgeButtonGroup data={buttons2} />
            )}
            {getUserTypeValue() !== "dh" && (
              <ButtonGroupView
                data={buttons}
                class={"flex !justify-end w-[130px] max-sm:w-[170px]"}
              />
            )}
          </InfoCellGray>
          <Divider />
        </div>
      );
    };
    const render2 = () => {
      const data: IFilterMenuChoose[] = [
        { type: "area", key: "code" },
        { type: "productType", key: "productType", title: "产品类型" },
      ];
      return (
        <CardView title={getUserTypeValue() == "dh" ? "申请列表" : "大户列表"}>
          <FilterMenuSearch
            choose={data}
            v-model={form.value}
            searchKey="name"
          />
          <ListView
            {...getUserInfoUrl(
              {
                dh: "/api/H5/sell/unsale/heavy/applyList",
                xh: "/api/H5/sell/unsale/small/listHeavy",
              },
              form.value
            )}
            ref={page}
            type="page"
            params={form.value}
            renderItem={renderItem}
          />
        </CardView>
      );
    };

    return () => {
      return (
        <PageTitle
          title="帮滞销"
          right={() => (
            <IconText
              url={time}
              text="历史记录"
              class="header-right"
              onClick={() => router.push("/unsalableRecord")}
            />
          )}
        >
          {render1()}
          {render2()}
        </PageTitle>
      );
    };
  },
});
